import { Tabs, Panel, Input, List, Button, Checkbox, Toast } from 'zarm'
import CustomIcon from '@/components/CustomIcon'
import React, { useEffect, useState, useRef } from 'react'

import s from './style.module.less'
import { login, register } from '@/utils/api'

const Login = () => {
    const [value, setValue] = useState(0);  // 面板
    const focusInput = useRef();

    const [username, setUsername] = useState(''); // 账号
    const [password, setPassword] = useState(''); // 密码
    const [verify, setVerify] = useState(''); // 验证码

    const onSubmit = async () => {
        if (!username) {
            Toast.show('请输入账号')
            return
        }
        if (!password) {
            Toast.show('请输入密码')
            return
        }
        // 判断是否是登录状态
        if (value == 0) {
            const data = await login({
                username,
                password
            });
            Toast.show(data.message || data.msg)
            // 将 token 写入 localStorage
            localStorage.setItem('token', data.data.token);
        } else {
            // if (!verify) {
            //     Toast.show('请输入验证码')
            //     return
            // };
            // if (verify != captcha) {
            //     Toast.show('验证码错误')
            //     return
            // };
            const data = await register({
                username,
                password
            });
            Toast.show(data.message || data.msg)
        }
    };
    return (
        <div className={s.login}>
            <Tabs value={value} onChange={setValue}>
                <Panel title="登录"></Panel>
                <Panel title="注册"></Panel>
            </Tabs>
            <List className={s.login_wrap}>
                <List.Item title="登录账号">
                    <Input
                        ref={focusInput}
                        placeholder="请输入"
                        value={username}
                        onChange={(e) => {
                            setUsername(e.target.value);
                        }}
                    />
                </List.Item>
                <List.Item title="登陆密码">
                    <Input
                        type='password'
                        ref={focusInput}
                        placeholder="请输入"
                        value={password}
                        onChange={(e) => {
                            setPassword(e.target.value);
                        }}
                    />
                </List.Item>
            </List>
            <Button className={s.btn} block theme="primary" onClick={onSubmit}>{value === 0? '登录':'注册'}</Button>
        </div>
    )
}

export default Login